<template>
  <view class="container">
    <view class="header">
      <text class="title">拍照组件演示</text>
    </view>
    
    <!-- 使用拍照组件 -->
    <x-camera></x-camera>
    
    <view class="tips">
      <text class="tips-text">提示：此功能需要在真机环境下运行</text>
    </view>
  </view>
</template>

<script>
import xCamera from '@/components/x-camera/x-camera.vue'

export default {
  components: {
    xCamera
  },
  data() {
    return {
      
    }
  },
  onLoad() {
    
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.tips {
  margin-top: 30px;
  padding: 15px;
  background-color: #fff3cd;
  border-radius: 5px;
  border-left: 4px solid #ffc107;
}

.tips-text {
  color: #856404;
  font-size: 14px;
}
</style>